// 用户访问饼图
const option1 = {
    title: {
        text: '站点访问',
        subtext: '城市分布',
        left: 'left'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'right'
    },
    series: [
        {
            name: '来自',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1048, name: '深圳' },
                { value: 735, name: '广州' },
                { value: 795, name: '上海' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}
// 折线图
const option2 = {
    title: {
        text: '周访问量',
        subtext: '城市分布',
        left: 'left'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'right'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '深圳',
            type: 'line',
            step: 'start',
            data: [120, 132, 101, 134, 90, 230, 210],
            label: {
                show: true
            }
        },
        {
            name: '广州',
            type: 'line',
            step: 'middle',
            data: [220, 282, 201, 234, 290, 430, 410],
            label: {
                show: true
            }
        },
        {
            name: '上海',
            type: 'line',
            step: 'end',
            data: [450, 432, 401, 454, 590, 530, 510],
            label: {
                show: true
            }
        }
    ]
}
// 柱状图
const option3 = {
    title: {
        text: '周访问量',
        subtext: '城市分布',
        left: 'left'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'right'
    },
    xAxis: {
        type: 'category',
        data: ['广州', '深圳', '上海'],
        axisTick: {
            alignWithLabel: true
        },
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '男',
            type: 'line',
            step: 'start',
            data: [70, 110, 130],
            type: 'bar',
            barWidth: '20%'
        },
        {
            name: '女',
            type: 'line',
            step: 'end',
            data: [120, 200, 150],
            type: 'bar',
            barWidth: '20%'
        }
    ]
}

// 圆环图
const option4 = {
    title: {
        text: '开发时长占比',
        left: 'center',
        top: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        top: 'bottom'
    },
    series: [
        {
            type: 'pie',
            data: [
                {
                    value: 30,
                    name: '前端'
                },
                {
                    value: 40,
                    name: '后端'
                },
                {
                    value: 30,
                    name: '测试'
                }
            ],
            radius: ['40%', '70%']
        }
    ]
}
// 站点技术占比图
const option5 = {
    title: {
        text: 'Demo使用的技术',
        subtext: '大致情况',
        top: 'bottom',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: 'top'
    },
    series: [
        {
            name: '技术名称',
            type: 'pie',
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 8
            },
            data: [
                { value: 100, name: 'vue' },
                { value: 20, name: 'vite' },
                { value: 60, name: 'electron' },
                { value: 30, name: 'axios' },
                { value: 40, name: 'echarts' },
                { value: 60, name: '其他' },
            ]
        }
    ]
}


export {
    option1,
    option2,
    option3,
    option4,
    option5
}